<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="school" label="学校" width="120">
        <template #default="scope">
          <el-input v-model="tableData[scope.$index].school" />
        </template>
      </el-table-column>
      <el-table-column prop="major" label="专业" width="150">
        <template #default="scope">
          <el-input v-model="tableData[scope.$index].major" />
        </template>
      </el-table-column>
      <el-table-column prop="educationLevel" label="学历" width="120">
        <template #default="scope">
          <el-select v-model="tableData[scope.$index].educationLevel" placeholder="请选择" size="large">
            <el-option v-for="level in  levelOptions" :key="level" :label="level" :value="level" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="monthRange" label="时间段" width="300">
        <template #default="scope">
          <el-date-picker v-model="tableData[scope.$index].monthRange" type="monthrange" unlink-panels
            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="40">
        <template #default="scope">
          <el-button link type="primary" :icon="Delete" @click.prevent="deleteRow(scope.$index)" />
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="12">
        <el-button class="mt-4" style="width: 100%" @click="onAddItem">
          <el-icon>
            <CirclePlusFilled />
          </el-icon>&nbsp;Add Item
        </el-button>
      </el-col>
    </el-row>
    <el-button type="primary" @click="postEducation">提交</el-button>

  </div>
</template>

<script setup>
import {
  CirclePlusFilled,
  Delete,
} from '@element-plus/icons-vue'
import { reactive, getCurrentInstance } from 'vue';

const tableData = reactive([{
  school: '',
  major: '',
  educationLevel: '',
  monthRange: []
}])

const deleteRow = (index) => {
  tableData.splice(index, 1)
}

const onAddItem = () => {
  tableData.push({
    school: "",
    major: "",
    educationLevel: "",
    monthRange: [],
  })

  /* defineExpose({
    tableData
  }) */
}

const levelOptions = ['初中及以下', '中专/中技', '高中', '大专', '本科', '硕士', '博士']

const { proxy } = getCurrentInstance()
const baseURL = "http://localhost:8080/"
const postEducation = function () {
  proxy.$axios.post(baseURL + '/education', tableData)
    .then(function (response) {
      const { data: res } = response
      console.log(res)
      console.log(tableData)
    });
}

</script>
<script>
export default {
  name: 'Education'
}
</script>

<style scoped>

</style>

